<template>
  <div id="main">
    <div style="height: 40px;line-height: 40px;border-bottom: 5px solid rgba(0, 0, 0, 0.12)">
      <p style="margin-left: 15px;letter-spacing: 2px;">预定会议室</p>
    </div>
    <div id="content">
      <table>
        <tr>
          <th><p>会议室:</p></th>
          <td><span>{{conferenceNum}}</span></td>
        </tr>
        <tr>
          <th><p>预定时间:</p></th>
          <td><span>{{appointmentDate}}</span></td>
          <div style="display: flex;flex-direction: column">
            <div>
              <th style="padding-left: 50px"><p>周期预定:</p></th>
              <td>
                <el-switch v-model="cycleState" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
              </td>
            </div>
            <div>
              <th style="padding-left: 50px"><p>连续预定:</p></th>
              <td>
                <el-switch v-model="continuityState" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
              </td>
            </div>
          </div>
        </tr>
        <tr>
          <th><p>开始时间：</p></th>
          <td>
            <el-time-picker v-model="beginTime"
                            :picker-options="{
                              selectableRange: '09:00:00 - 21:00:00'
                            }" placeholder="请输入开始时间" style="width: 300px"></el-time-picker>
          </td>
        </tr>
        <tr>
          <th><p>结束时间：</p></th>
          <td>
            <el-time-picker v-model="endTime"
                            :picker-options="{
                              selectableRange: '09:00:00 - 21:00:00'
                            }" placeholder="请输入结束时间" style="width: 300px"></el-time-picker>
          </td>
        </tr>
        <tr>
          <th><p>预定人：</p></th>
          <td>
            <el-input placeholder="请输入会议室预定人" v-model="subscriber" clearable></el-input>
          </td>
        </tr>
        <tr>
          <th><p>电话：</p></th>
          <td>
            <el-input v-model="phoneNum" clearable></el-input>
          </td>
        </tr>
        <tr>
          <th><p>邮箱：</p></th>
          <el-input placeholder="请输入邮箱地址" v-model="mailAddress">
            <template slot="append">@neusoft.com</template>
          </el-input>
        </tr>
        <tr>
          <th><p>预定原因：</p></th>
          <td>
            <el-select v-model="reason" placeholder="请选择">
              <el-option
                v-for="item in reasonOptions"
                :key="item.value"
                :value="item.value">
              </el-option>
            </el-select>
          </td>
        </tr>
        <tr>
          <th><p>备注：</p></th>
          <td>
            <el-input type="textarea" :rows="10" v-model="remarks"></el-input>
          </td>
        </tr>
      </table>
    </div>
    <div style="position:absolute;left: 50%;transform: translate(-50%)">
      <el-button style="margin-top: 20px;width: 400px" type="success" @click="submit()">提交</el-button>
    </div>
    <el-dialog title="预定周期设定" :visible.sync="cycleDisplay" :modal="false">
      <el-form :model="cycleForm">
        <el-form-item label="时间跨度选择">
          <el-select v-model="cycleForm.timeSlot">
            <el-option label="每天此时间段" value="day"></el-option>
            <el-option label="每周此时间段" value="week"></el-option>
            <el-option label="每月此时间段" value="month"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cycleState = false">取 消</el-button>
        <el-button type="primary" @click="cycleDisplay = false">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="连续预定周期设定" :visible.sync="continuityDisplay" :modal="false">
      <el-date-picker
        v-model="continuityData"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
      <div slot="footer" class="dialog-footer">
        <el-button @click="continuityState = false">取 消</el-button>
        <el-button type="primary" @click="continuityDisplay = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import Qs from 'qs'

export default {
  name: "meeting_appointment",
  data(){
    return{
      //会议室号
      conferenceNum: "",
      //预定日期
      appointmentDate: "",
      //是否周期预定
      cycleState: false,
      cycleDisplay: false,
      //周期预定表单
      cycleForm: {
        timeSlot: ""
      },
      //是否启用连续预定
      continuityState: false,
      continuityDisplay: false,
      //启用连续预定绑定数据
      continuityData: "",
      //预定会议开始时间
      beginTime: "",
      //预定会议结束时间
      endTime: "",
      //预定人
      subscriber: "",
      //手机号码
      phoneNum: "",
      //邮箱地址
      mailAddress: "",
      //预定理由
      reason: "",
      reasonOptions:[
        {
          value: '项目评审'
        },
        {
          value: '晨会'
        },
        {
          value: '例行周会'
        }
      ],
      //备注信息
      remarks: ""
    }
  },
  methods: {
    /*
    * @author: Zhang Lin
    * @date: 2022-04-12
    * @description: 在页面初期阶段，对Token进行校验;
    * */
    verificationToken: function () {
      let token =  window.sessionStorage.setItem("access-token",JSON.stringify(res.data))
      if (token == null){
        this.$message({
          message: '抱歉，登录状态丢失，请重新登录',
          type: 'warning'
        });
        setTimeout(()=>{
          this.$router.push('/');
        }, 100);
      } else {
        /*
        * 请求后端接口验证token有效性；
        * 形参为客户端储存的token值；
        * 返回值为状态码；
        * */
        let data = {
          token: token
        };
        data = Qs.stringify(data);
        axios.post('',data).then(res=>{
          if (res.data.code !== 200){
            this.$message({
              message: '抱歉，登录状态验证失败，请重新登录',
              type: 'warning'
            });
            setTimeout(()=>{
              this.$router.push('/');
            }, 100);
          }
        })
      }
    },
    submit: function () {
      if (this.beginTime === ""&&this.endTime === ""&&this.subscriber === ""&&this.phoneNum === ""&&this.reason === ""){
        this.$message({
          message: '请将必填项全部完成',
          type: 'warning'
        });
      } else {
        let submitData = {
          conferenceNum: this.conferenceNum,
          appointmentDate: this.appointmentDate,
          beginTime: this.beginTime,
          endTime: this.endTime,
          subscriber: this.subscriber,
          phoneNum: this.phoneNum,
          mailAddress: this.mailAddress,
          reason: this.reason,
          remarks: this.remarks,
          continuityState: this.continuityState,
          continuityData: this.continuityData,
          timeSlot: this.cycleForm.timeSlot,
          cycleState: this.cycleState
        };
        submitData = Qs.stringify(submitData);
        axios.post('', submitData).then(res=>{
          if (res.data.code === 200){
            this.$message({
              message: '恭喜您，预定成功！',
              type: 'success'
            });
            setTimeout(()=>{
              this.$router.push('/index');
            }, 200);
          } else {
            this.$message({
              message: '数据上传失败，请重试！',
              type: 'warning'
            });
            setTimeout(()=>{
              //强制刷新以达到清空重置表单数据作用;
              this.$router.go(0);
            }, 200);
          }
        }).catch((error)=>{
          this.$message.error('后端服务请求失败，请重试或联系管理员');
          if (error.response) {
            console.log(error.response.data);
            console.log(error.response.status);
            console.log(error.response.headers);
          } else if (error.request) {
            console.log(error.request);
          } else {
            console.log('Error', error.message);
          }
          console.log(error.config);
        })
      }
    }
  },
  watch: {
    cycleState(){
      this.cycleDisplay = this.cycleState === true;
    },
    continuityState(){
      this.continuityDisplay = this.continuityState === true;
    }
  },
  mounted() {
    this.verificationToken();
    //通过查询参数获取到预定会议室号码;
    this.conferenceNum = this.$route.query.conferenceNum;
    //通过查询参数获取到会议室预定日期;
    this.appointmentDate = this.$route.query.appointmentDate;
  }
}
</script>

<style scoped>
  #main{
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    margin-top: 50px;
    width: 1200px;
    height: 800px;
    border: 2px solid rgba(0, 0, 0, 0.12);
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  }
  #content{
    margin-left: 150px;
    margin-top: 50px;
  }
  th{
    width: 200px;
    text-align: left;
  }
</style>
